<template>
  <el-dialog :title="titlePark" append-to-body :close-on-click-modal="false" @close="closeDialog()" v-model="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
      label-width="200px" style="height:500px;overflow: hidden;overflow-y: scroll;padding-right:5px">
      <el-form-item label="停车场ID" prop="id" v-if="titlePark=='修改'">
        <el-input v-model="dataForm.id" placeholder="停车场ID" disabled></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="集团编码" prop="deptName">
            <el-tree :data="deptList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="集团编码" prop="deptName">
            <el-input v-model="dataForm.deptName" placeholder="集团编码">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="停车场名称" prop="parkName">
            <el-input v-model="dataForm.parkName" placeholder="停车场名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车位总数" prop="spaceCount">
            <el-input v-model="dataForm.spaceCount" placeholder="本停车场停车位数"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="免费时长(分钟)" prop="freeTime">
            <el-input v-model="dataForm.freeTime" placeholder="免费时长:分钟(默认蓝牌)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="提前付费后出场限时间(分钟)" prop="exitTime">
            <el-input v-model="dataForm.exitTime" placeholder="提前付费后出场限制时间"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="黑名单提示" prop="blackListRemark">
            <el-input v-model="dataForm.blackListRemark" placeholder="黑名单提示"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="每天最高收费" prop="oneDayMaxFee">
            <el-input v-model="dataForm.oneDayMaxFee" placeholder="一天最多收费多少钱"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="停车场类型" prop="parkType">
            <!-- <el-select v-model="dataForm.parkType" class="m-2" placeholder="停车场类型" size="large">
              <el-option v-for="item in parkTypeChoose" :key="item.value" :label="item.label" :value="item.value" />
            </el-select> -->
            <el-select v-model="dataForm.parkType" clearable class="m-2" placeholder="停车场类型" size="large">
              <el-option v-for="item in dicts.park_type" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="月租可以往前选择多少天" prop="monthlyPreDays">
            <el-input v-model="dataForm.monthlyPreDays" placeholder="月租可以往前选择多少天"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="月租可以往后选择多少天" prop="monthlyAfterDays">
            <el-input v-model="dataForm.monthlyAfterDays" placeholder="月租可以往后选择多少天"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="月租到期提醒" prop="monthlyNoticeType">
            <el-select v-model="dataForm.monthlyNoticeType" class="m-2" placeholder="0 不提醒 1 只公众号 2公众号和短信 3只短信"
              size="large">
              <el-option v-for="item in dicts.park_monthly_notice" :key="item.value" :label="item.label"
                :value="item.value" />
            </el-select>
            <!-- <el-input v-model="dataForm.monthlyNoticeType" placeholder="0 不提醒 1 只公众号 2公众号和短信 3只短信"></el-input> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="提前多少天提醒" prop="monthlyNoticeDays">
            <el-input v-model="dataForm.monthlyNoticeDays" placeholder="提前多少天提醒"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最多绑定多少个车牌号" prop="maxBindPlateNum">
            <el-input v-model="dataForm.maxBindPlateNum" placeholder="最多绑定多少个车牌号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="月租到期缓冲天数" prop="bufferDays">
            <el-input v-model="dataForm.bufferDays" placeholder="月租到期缓冲天数"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="每24小时最高收费多少钱" prop="perDayMaxFee">
            <el-input v-model="dataForm.perDayMaxFee" placeholder="每24小时最高收费多少钱"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="场中场类型" prop="bigParkType">
            <el-select v-model="dataForm.bigParkType" class="m-2" placeholder="场中场类型 0 单个车场 1 场中场同经营主体  2 场中场不同经营主体"
              size="large">
              <el-option v-for="item in dicts.park_big_park" :key="item.value" :label="item.label"
                :value="item.value" />
            </el-select>
            <!-- <el-input v-model="dataForm.bigParkType" placeholder="场中场类型 0 单个车场 1 场中场同经营主体  2 场中场不同经营主体"></el-input> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="停车位统计" prop="spacesCensus">
            <el-select v-model="dataForm.spacesCensus" class="m-2" placeholder="停车位统计(0 临停月租分开统计 1混合统计 )" size="large">
              <el-option v-for="item in spacesCen" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <!-- <el-input v-model="dataForm.spacesCensus" placeholder="停车位统计(0 临停月租分开统计 1混合统计 )"></el-input> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="在线包月最大限制车位数:" prop="maxMonthlyLotnum">
            <el-input v-model="dataForm.maxMonthlyLotnum" placeholder="在线包月最大限制车位数:"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="省、市、县">
            <ThreeLevel ref="updateCounty" @hopename="hopename"
              :hopeAddrpare="[dataForm.provinceid,dataForm.cityid,dataForm.areaid]">
            </ThreeLevel>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="详细地址" prop="address">
            <el-autocomplete style="width:100%" v-model="dataForm.address" :trigger-on-focus="true"
              :fetch-suggestions="querySearchAsync" placeholder="详细地址" @select="handleSelect" clearable>
            </el-autocomplete>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="经度" prop="longitude">
            <el-input v-model="dataForm.longitude" placeholder="停车场经度  停车场中心的"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纬度  " prop="latitude">
            <el-input v-model="dataForm.latitude" placeholder="停车场纬度  停车场中心的"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row :span="24"> -->
      <div style="width:100%;height:400px;border:1px solid">
        <el-bmap ref="map" :preserve-drawing-buffer="true" :heading="heading" :center="center" :zoom="zoom"
          @click="getInfo" />
      </div>

      <!-- </el-row> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { getObj, addObj, putObj } from '@/api/stop/parking'
import { fetchTree } from '@/api/admin/dept'
import ThreeLevel from "@/components/ThreeLevel/index.vue";
export default {
  components: { ThreeLevel },
  dicts: ['park_type', 'park_monthly_notice', 'park_big_park'],
  data () {
    return {
      zoom: 16,
      center: [121.59996, 31.197646],
      //   tilt: 60,
      heading: 0,
      timer: null,
      titlePark: '',
      visible: false,
      canSubmit: false,
      dataForm: {
        city: undefined,
        county: undefined,
        province: undefined,
        latitude: null,
        longitude: null
      },
      dataRule: {
        parkName: [
          { required: true, message: '停车场名称不能为空', trigger: 'blur' }
        ],

        spaceCount: [
          { required: true, message: '本停车场停车位数不能为空', trigger: 'blur' }
        ],

        longitude: [
          { required: true, message: '停车场经度  停车场中心的不能为空', trigger: 'blur' }
        ],

        latitude: [
          { required: true, message: '停车场纬度  停车场中心的不能为空', trigger: 'blur' }
        ],

        address: [
          { required: true, message: '车场的具体位置，哪条街，哪个路不能为空', trigger: 'blur' }
        ],

        parkType: [
          { required: true, message: '停车场类型不能为空', trigger: 'blur' }
        ],

        description: [
          { required: true, message: '描述不能为空', trigger: 'blur' }
        ],

        networkState: [
          { required: true, message: '停车场网络状态，1正常 ，0 断网不能为空', trigger: 'blur' }
        ],

        provinceid: [
          { required: true, message: '省份不能为空', trigger: 'blur' }
        ],

        cityid: [
          { required: true, message: '市不能为空', trigger: 'blur' }
        ],

        areaid: [
          { required: true, message: '区县不能为空', trigger: 'blur' }
        ],

        secret: [
          { required: true, message: '密钥不能为空', trigger: 'blur' }
        ],

        blackListRemark: [
          { required: true, message: '黑名单提示不能为空', trigger: 'blur' }
        ],

        freeTime: [
          { required: true, message: '免费时长:分钟(默认蓝牌)不能为空', trigger: 'blur' }
        ],

        exitTime: [
          { required: true, message: '提前付费后出场限制时间不能为空', trigger: 'blur' }
        ],

        isSync: [
          { required: true, message: '是否下发 0 未下发 1已下发不能为空', trigger: 'blur' }
        ],

        oneDayMaxFee: [
          { required: false, message: '一天最多收费多少钱不能为空', trigger: 'blur' }
        ],

        monthlyPreDays: [
          { required: true, message: '月租可以往前选择多少天不能为空', trigger: 'blur' }
        ],

        monthlyAfterDays: [
          { required: true, message: '月租可以往后选择多少天不能为空', trigger: 'blur' }
        ],

        monthlyNoticeType: [
          { required: true, message: '0 不提醒 1 只公众号 2公众号和短信 3只短信不能为空', trigger: 'blur' }
        ],

        monthlyNoticeDays: [
          { required: true, message: '提前多少天提醒不能为空', trigger: 'blur' }
        ],

        maxBindPlateNum: [
          { required: true, message: '最多绑定多少个车牌号不能为空', trigger: 'blur' }
        ],

        bufferDays: [
          { required: true, message: '月租到期缓冲天数不能为空', trigger: 'blur' }
        ],

        one_24hMaxFee: [
          { required: false, message: '每24小时最高收费多少钱不能为空', trigger: 'blur' }
        ],

        bigParkType: [
          { required: true, message: '场中场类型 0 单个车场 1 场中场同经营主体  2 场中场不同经营主体不能为空', trigger: 'blur' }
        ],

        spacesCensus: [
          { required: true, message: '停车位统计(0 临停月租分开统计 1混合统计 )不能为空', trigger: 'blur' }
        ],

        isSelectSpace: [
          { required: true, message: '是否选择车位不能为空', trigger: 'blur' }
        ],

        maxMonthlyLotnum: [
          { required: true, message: '在线包月最大限制车位数:不能为空', trigger: 'blur' }
        ],
        deptId: [{ required: true, message: '集团编码不能为空', trigger: 'blur' }]






      },
      //停车位统计(0 临停月租分开统计 1混合统计 )
      spacesCen: [
        { value: 0, label: "临停月租分开统计" },
        { value: 1, label: "混合统计" },
      ],
      mk: '',
      //表格树数据
      deptList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  mounted () {
    this.getList()
  },

  methods: {
    initMap (point) {
      this.mk = new BMapGL.Marker(point, { enableDragging: true }) //创建一个图像标注实例，enableDragging：是否启用拖拽，默认为false
      this.$refs.map.$$getInstance().addOverlay(this.mk) //将覆盖物添加到地图中
      //   console.log(this.mk);
    },
    getInfo (e) {
      //   console.log(e);
      this.dataForm.latitude = parseFloat(e.latlng.lat).toFixed(6)
      this.dataForm.longitude = parseFloat(e.latlng.lng).toFixed(6)
      this.$refs.map.$$getInstance().clearOverlays() //清除地图上所有覆盖物
      this.mk = new BMapGL.Marker(e.latlng) //根据所选坐标重新创建Marker
      this.$refs.map.$$getInstance().addOverlay(this.mk) //将覆盖物重新添加到地图中
      this.getAddrByPoint(e.latlng)
      this.initMap(e.latlng)
    },
    getAddrByPoint (point) {
      var that = this;
      var geco = new BMapGL.Geocoder();
      geco.getLocation(point, function (res) {
        // console.log(res)  //内容见下图
        that.dataForm.address = res.address
        that.mk.setPosition(point) //重新设置标注的地理坐标
        that.$refs.map.$$getInstance().panTo(point)  //将地图的中心点更改为给定的点
        that.dataForm.address = res.address;  //记录该点的详细地址信息
        that.dataForm.addrPoint = point;  //记录当前坐标点
      })
    },
    querySearchAsync (str, callback) {
      var options = {
        onSearchComplete: function (res) { //检索完成后的回调函数
          //   console.log(res);
          var s = [];

          if (local.getStatus() == BMAP_STATUS_SUCCESS) {
            for (var i = 0; i < res.getCurrentNumPois(); i++) {
              // 数组中的每一项都是一个对象，对象中必须要有value属性，否则不能显示，有没有别的属性不影响。原因是因为源码中定义的就是value字段
              res.getPoi(i).value = res.getPoi(i).address + res.getPoi(i).title
              s.push(res.getPoi(i));
            }
            callback(s) //获取到数据时，通过回调函数cb返回到<el-autocomplete>组件中进行显示
            // console.log(s);
          } else {
            callback(s)
          }
        }
      }
      //   console.log(this.result);
      //   console.log(this.$refs.map.$$getInstance());
      var local = new BMapGL.LocalSearch(this.$refs.map.$$getInstance(), options) //创建LocalSearch构造函数
      local.search(str) //调用search方法，根据检索词str发起检索
      //   console.log(str);
      //   console.log(cb);
    },
    handleSelect (item) {
      // console.log(item.point);
      this.dataForm.address = item.address + item.title; //记录详细地址，含建筑物名
      this.dataForm.latitude = parseFloat(item.point.lat).toFixed(6)
      this.dataForm.longitude = parseFloat(item.point.lng).toFixed(6)
      //   this.form.addrPoint = item.point; //记录当前选中地址坐标
      this.$refs.map.$$getInstance().clearOverlays() //清除地图上所有覆盖物
      //   console.log(item.point);
      this.mk = new BMapGL.Marker(item.point) //根据所选坐标重新创建Marker
      this.$refs.map.$$getInstance().addOverlay(this.mk) //将覆盖物重新添加到地图中
      this.$refs.map.$$getInstance().panTo(item.point) //将地图的中心点更改为选定坐标点
    },
    hopename (val) {
      //   console.log(val);
      this.dataForm.provinceName = val.province
      this.dataForm.cityName = val.city
      this.dataForm.areaName = val.county
      this.dataForm.provinceid = val.provinceId
      this.dataForm.cityid = val.cityId
      this.dataForm.areaid = val.countyId
      this.dataForm.address = val.province + val.city + val.county
      //   this.dataForm.citys = ["val.provinceId", "val.cityId", "val.countyId"]
    },
    getList () {
      fetchTree().then(response => {
        // console.log(response);
        this.deptList = response.data.data
      })
    },
    handleNodeClick (data) {
      console.log(data);
      this.dataForm.deptId = data.id
      this.dataForm.deptName = data.name
    },
    init (id) {
      if (id == undefined) {
        this.titlePark = '新增'
      } else {
        this.titlePark = '修改'
        this.$nextTick(() => {
          this.$refs['updateCounty'].init()
        })
      }
      this.visible = true;
      this.canSubmit = true;
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (id) {
          getObj(id).then(response => {
            this.dataForm = response.data.data
            this.$refs.map.$$getInstance().clearOverlays()
            this.center = [response.data.data.longitude, response.data.data.latitude]
            this.mk = new BMapGL.Marker({ lat: response.data.data.latitude, lng: response.data.data.longitude }, { enableDragging: true }) //创建一个图像标注实例，enableDragging：是否启用拖拽，默认为false
            this.$refs.map.$$getInstance().addOverlay(this.mk)
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.canSubmit = false;
          if (this.dataForm.id) {
            putObj(this.dataForm).then(data => {
              this.$notify.success('修改成功')
              this.visible = false
              this.$emit('refreshDataList')
            }).catch(() => {
              this.canSubmit = true;
            });
          } else {
            addObj(this.dataForm).then(data => {
              console.log(this.dataForm);
              this.$notify.success('添加成功')
              this.visible = false
              this.$emit('refreshDataList')
            }).catch(() => {
              this.canSubmit = true;
            });
          }
        }
      })
    },
    //重置表单
    closeDialog () {
      this.$refs["dataForm"].resetFields()
    }
  }
}
</script>
<style scoped>
</style>
